<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%;height: 500px">
      <el-table-column prop="loadDate" label="日期" width="120" fixed></el-table-column>
      <!-- 动态生成时间列 -->
      <el-table-column v-for="time in columns.slice(1)" :key="time" :prop="time" :label="time">
      </el-table-column>
      <!-- <el-table-column prop="loadDate" label="日期" width="180"/>
      <el-table-column
          v-for="(time, index) in timeLabels"
          :key="index"
          :prop="`time_${index}`"
          :label="time"
          width="80"
      /> -->
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  tableData: {
    type: Array,
    default: []
  }
})

const columns = ref(['loadDate']); // 初始化表头
const tableData = ref([]); // 初始化表格数据

const processData = () => {
  const processedData = {};
  const timeNames = new Set();

  // 遍历原始数据，填充 processedData 对象
  props.tableData.forEach(item => {
    const dateKey = item.loadDate.split(' ')[0]; // 取日期部分作为键
    if (!processedData[dateKey]) {
      processedData[dateKey] = {};
    }
    processedData[dateKey][item.timeName] = item.loadValue;
    timeNames.add(item.timeName); // 记录所有不同的时间点
  });

  // 将 processedData 转换为 el-table 所需的数组形式
  const data = Object.keys(processedData).map(date => {
    const row = { loadDate: date };
    Array.from(timeNames).forEach(timeName => {
      row[timeName] = processedData[date][timeName] || null; // 如果该时间点没有数据，则填充 null 或其他默认值
    });
    return row;
  });

  // 更新组件的状态
  columns.value = ['loadDate', ...Array.from(timeNames)];
  tableData.value = data;
};
watch(
  () => props.tableData,
  (newVal) => {
    console.log(newVal);
    processData();
  }
);

// 生成时间标签
const generateTimeLabels = () => {
  const labels = [];
  for (let hour = 0; hour <= 24; hour++) {
    for (let minute = 0; minute < 60; minute += 15) {
      if ((hour === 0 && minute === 0) || (hour === 24 && minute !== 0)) {
        continue; // 跳过00:00和24:15、24:30、24:45
      }
      let timeLabel = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
      labels.push(timeLabel);
    }
  }
  return labels;
}
const timeLabels = ref(generateTimeLabels());

// const tableData = [
//   {
//     date: "2016-05-03",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-02",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-04",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-01",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-02",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-04",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-01",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-02",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-04",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-01",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-02",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-04",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-01",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-02",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-04",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
//   {
//     date: "2016-05-01",
//     name: "Tom",
//     address: "No. 189, Grove St, Los Angeles",
//   },
// ];
</script>

<style lang="scss" scoped></style>